<template>
  <div class="register-container">
    <a-card class="register-card" title="注册">
      <!-- <div class="logo-title">
        <h1>注册</h1>
      </div> -->
      <a-form :model="form" ref="formRef" @submit.prevent="handleSubmit">
        <a-form-item :validateStatus="errors.username ? 'error' : ''" :help="errors.username">
          <a-input
            v-model:value="form.username"
            placeholder="Enter your username"
            @input="validateField('username')"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item :validateStatus="errors.password ? 'error' : ''" :help="errors.password">
          <a-input
            type="password"
            v-model:value="form.password"
            placeholder="Enter your password"
            @input="validateField('password')"
          >
            <template #prefix>
              <LockOutlined />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          :validateStatus="errors.confirmPassword ? 'error' : ''"
          :help="errors.confirmPassword"
        >
          <a-input
            type="password"
            v-model:value="form.confirmPassword"
            placeholder="Confirm your password"
            @input="validateField('confirmPassword')"
          >
            <template #prefix>
              <LockOutlined />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" htmlType="submit" :loading="isSubmitting" block>
            {{ isSubmitting ? '正在提交注册信息...' : '注册' }}
          </a-button>
        </a-form-item>
        <a-form-item>
            <a @click="backLogin()">返回登录</a>
          </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>
  
  <script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { register } from '@/api/user-api/userApi';
import { RegisterData } from '@/type/type';

const form = ref({
  username: '',
  password: '',
  confirmPassword: '',
});
//表单验证
const errors = ref({
  username: '',
  password: '',
  confirmPassword: '',
});

const validateField = field => {
  if (field === 'username') {
    if (form.value.username.length < 4) {
      errors.value.password = 'Username must be at least 4 characters long';
    }
    errors.value.username = form.value.username.trim() === '' ? 'Username is required' : '';
  } else if (field === 'password') {
    if (form.value.password.trim() === '') {
      errors.value.password = 'Password is required';
    } else if (form.value.password.length < 8) {
      errors.value.password = 'Password must be at least 6 characters long';
    } else {
      errors.value.password = '';
    }
  } else if (field === 'confirmPassword') {
    if (form.value.confirmPassword !== form.value.password) {
      errors.value.confirmPassword = 'Passwords do not match';
    } else {
      errors.value.confirmPassword = '';
    }
  }
};

//注册
const isSubmitting = ref(false);
const handleSubmit = async () => {
  isSubmitting.value = true;
  validateField('username');
  validateField('password');
  validateField('confirmPassword');

  if (errors.value.username || errors.value.password || errors.value.confirmPassword) {
    return; // Stop form submission if there are errors123123123123
  }
//   const tmp: RegisterData = {
//     userAccount: form.value.username,
//     userPassword: form.value.password,
//     checkPassword: form.value.confirmPassword,
//   };
  const formData = new FormData();
    formData.append('userAccount', form.value.username);
    formData.append('userPassword', form.value.password);
    formData.append('checkPassword', form.value.confirmPassword);
  const response = await register(formData);
  if (response === -3) {
    message.error('不能包含特殊字符！');
    isSubmitting.value = false;
    return;
  }
  if (response === -5) {
    message.error('该账户已被使用！');
    isSubmitting.value = false;
    return;
  }

  // Simulate a registration request
  setTimeout(() => {
    isSubmitting.value = false;
    message.success('Registration successful!');
    // Clear the form and errors after successful registration
    form.value.username = '';
    form.value.password = '';
    form.value.confirmPassword = '';
    errors.value.username = '';
    errors.value.password = '';
    errors.value.confirmPassword = '';
  }, 1000);
};

import { useRouter } from "vue-router";
const router=useRouter();
const backLogin = ()=>{
    router.back();
}
</script>
  
  <style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.register-card {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo-title {
  text-align: center;
  margin-bottom: 20px;
}

.logo {
  font-size: 40px;
  color: #1890ff;
}

h1 {
  margin: 10px 0;
  font-size: 24px;
  color: #333;
}

.error {
  border-color: red;
}

.error-message {
  color: red;
  font-size: 12px;
}
</style>
  